<template>
  <div class="root">
    <div class="titleBox">
      <span class="red">*</span>
      选择商品类目
    </div>
    <div class="textBox">
      请按照商品类别谨慎选择对应类目，若错放类目将会导致商品封禁或扣除保证金。
    </div>
    <div class="contentBox">
      <el-autocomplete
        :fetch-suggestions="querySearch"
        :trigger-on-focus="false"
        style="width: 50%"
        placeholder="试试搜：套装"
        prefix-icon="el-icon-search"
        @select="handleSelect"
        v-model="input2"
      >
      </el-autocomplete>
      <div class="cascaderBox">
        <el-cascader-panel
          @expand-change="getBlur"
          ref="cascaderRes"
          @change="getCascader"
          v-model="typeValue"
          :options="typeList"
          :props="{
            value: 'id',
            label: 'name',
          }"
        ></el-cascader-panel>
      </div>
      <div class="selectBox">
        已选类目 ：
        <div class="typeBox">{{ SelectList }}</div>
      </div>
    </div>
    <div class="btnBox">
      <div class="btn" @click="toPath">下一步</div>
    </div>
  </div>
</template>
  <script>
import { getListAndAccount } from "@/api/home/index";
import { getData, getAllListByChildren } from "@/api/shopDetail";
export default {
  data() {
    return {
      input2: "",
      typeList: [],
      typeValue: [],
      SelectList: "",

      restaurants: [],
      arrLength: [],
      itemData:[],
      newArr:[]
    };
  },
  created() {
    this.getListAndAccount();
    if (this.$route.query.id) {
      this.getData(this.$route.query.id);
    }
    if (this.$route.query.categoryId) {
      this.getAllListByChildren(this.$route.query.categoryId);
    }
  },
  methods: {
    getBlur(val) {
      console.log(val);
      let data = this.$refs.cascaderRes.getCheckedNodes();
      console.log(data);
      this.newArr=data
      this.arrLength = val;
    },
    //获取商品详情
    getData(id) {
      getData(id).then(({ data }) => {
        this.getAllListByChildren(data.categoryId);
      });
    },
    getAllListByChildren(id) {
      getAllListByChildren({
        categoryId: id,
      }).then(({ data }) => {
        let arr = [];
        let idArr = [];
        data.forEach((item) => {
          arr.push(item.name);
          idArr.push(item.id);
        });
        this.SelectList = arr.join(">");
        this.typeValue = idArr;
      });
    },
    handleSelect(val) {
      this.itemData=val
      if(val.children.length){
        this.newArr=[]
      }
      console.log(val);
      let data = [];
      if (val.cj == 1) {
        this.typeValue = [`${val.id}`];
        data = [`${val.value}`];
        this.arrLength = [`${val.value}`];
      } else if (val.cj == 2) {
        this.typeValue = [`${val.oneId}`, `${val.id}`];
        data = [`${val.oneName}`, `${val.value}`];
        this.arrLength = [`${val.oneName}`, `${val.value}`];
      } else {
        this.typeValue = [`${val.oneId}`, `${val.twoId}`, `${val.id}`];
        data = [`${val.oneName}`, `${val.value}`];
        this.arrLength = [`${val.oneName}`, `${val.twoName}`, `${val.value}`];
      }
      this.SelectList = data.join(">");
      console.log(this.arrLength);
      console.log(this.typeValue);
    },
    //搜索分类
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //下一步
    toPath() {
      if (
        ((this.arrLength.length == 2 && !this.newArr.length&&this.itemData.children.length) && this.typeValue.length !== 3) ||
        !this.typeValue.length
      ) {
        this.$message({
          message: "请选择商品类目",
          type: "warning",
        });
      } else {
        if (this.$route.query.id) {
          this.$router.push({
            path: "management",
            query: {
              typeValue: this.typeValue,
              SelectList: this.SelectList,
              id: this.$route.query.id,
            },
          });
        } else if (this.$route.query.data) {
          let typeShow = "1";

          if (
            this.typeValue[this.typeValue.length - 1] !==
            this.$route.query.categoryId
          ) {
            this.$route.query.data.form.typeList = [];
            typeShow = "0";
          }
          this.$router.push({
            path: "management",
            query: {
              typeValue: this.typeValue,
              SelectList: this.SelectList,
              data: this.$route.query.data,
              typeShow: typeShow,
            },
          });
        } else {
          this.$router.push({
            path: "management",
            query: {
              typeValue: this.typeValue,
              SelectList: this.SelectList,
            },
          });
        }
      }
    },
    getCascader(val) {
      let dataB = this.$refs.cascaderRes.getCheckedNodes();
      console.log(dataB);
      this.newArr=dataB
      let data = this.$refs.cascaderRes.getCheckedNodes()[0].pathLabels;
      console.log(data);
      this.SelectList = data.join(">");
    },
    //获取商品分类
    getListAndAccount() {
      getListAndAccount().then((data) => {
        data.data.forEach((item, index) => {
          if (!item.showStatus) {
            data.data.splice(index, 1);
          }
          console.log(item.showStatus);
          if (item.children) {
            item.children.forEach((item1, index1) => {
              if (!item1.showStatus) {
                item.children.splice(index1, 1);
              }
              if (item1.children.length) {
                item1.children.forEach((item2, index2) => {
                  if (!item2.showStatus) {
                    item1.children.splice(index2, 1);
                  }
                });
              }
            });
          }
        });
        data.data.forEach((item) => {
          var oneId = item.id;
          var oneName = item.name;
          let obj = {
            value: item.name,
            id: item.id,
            cj: 1,
            children:item.children
          };
          this.restaurants.push(obj);
          if (!item.children.length) {
            item.children = undefined;
          } else {
            item.children.forEach((item1) => {
              var twoId = item1.id;
              var twoName = item1.name;
              let obj = {
                value: item1.name,
                id: item1.id,
                oneId: oneId,
                oneName: oneName,
                cj: 2,
                children:item1.children
              };
              this.restaurants.push(obj);
              if (!item1.children.length) {
                item1.children = undefined;
              } else {
                item1.children.forEach((item2) => {
                  let obj = {
                    value: item2.name,
                    twoId: twoId,
                    oneId: oneId,
                    id: item2.id,
                    twoName: twoName,
                    oneName: oneName,
                    cj: 3,
                    children:item2.children
                  };
                  this.restaurants.push(obj);
                  if (!item2.children.length) {
                    item2.children = undefined;
                  }
                });
              }
            });
          }
        });
        this.typeList = data.data;
      });
    },
  },
};
</script>
  <style scoped lang="scss">
.root {
  .titleBox {
    font-weight: 700;
    font-size: 0.2rem;
    display: flex;
    align-items: center;
    .red {
      color: #e22a1f;
    }
  }
  .textBox {
    font-size: 0.15rem;
    color: #999999;
    margin-top: 0.1rem;
  }
  .contentBox {
    margin-top: 0.1rem;
    font-size: 0.1rem;
    .cascaderBox {
      margin-top: 0.1rem;
      height: 30vh;
      /deep/ .el-cascader-menu__wrap {
        height: 30vh;
      }
      /deep/ .el-cascader-node.in-active-path {
        color: #e22a1f;
      }
      /deep/ .el-cascader-node.is-active {
        color: #e22a1f;
      }
    }
    .selectBox {
      font-size: 0.15rem;
      color: #999999;
      margin-top: 0.1rem;
      display: flex;
      .typeBox {
        color: #666;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    .btn {
      background: #e22a1f;
      color: #fff;
      padding: 0.08rem 0.2rem;
      font-size: 0.15rem;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
  